@WIN8_SWITCH_ON_FOCUS_BACKGROUND: @WIN8_SELECTED_BACKGROUND_COLOR;
@WIN8_SWITCH_ON_HOVER_BACKGROUND: #2bb0ca;
@WIN8_SWITCH_ON_ACTIVE_BACKGROUND: @WIN8_ACCENT_COLOR;

@SWITCH_HEIGHT: 27px;

.dx-switch {
    width: 53px;
    height: @SWITCH_HEIGHT;
}

.dx-switch-container {
    width: 100%;
    height: @SWITCH_HEIGHT;
    position: relative;

    &:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 20px;
        top: 3px;
        border-right: 3px solid @WIN8_BASE_TEXT;
        border-left: 3px solid @WIN8_BASE_TEXT;
    }
}


.dx-switch-inner {
    position: relative;
    width: 200%;
    height: 100%;
}

.dx-switch-on, .dx-switch-off {
    float: left;
    width: 50%;
    height: 100%;
    color: transparent;
}

.dx-switch-off {
    padding: 8px 15px 8px 0;

    &:after {
        position: absolute;
        right: 10px;
        top: 3px;
        bottom: 3px;
        width: 50%;
        border: 3px solid @WIN8_BASE_TEXT;
        border-left: none;
        content: "";
    }

    &:before {
        display: block;
        width: 100%;
        height: 100%;
        background: transparent;
        content: "";
    }
}

.dx-switch-on {
    padding: 8px 0 8px 5px;

    &:after {
        position: absolute;
        top: 3px;
        left: 0px;
        bottom: 3px;
        width: 50%;
        border: 3px solid @WIN8_BASE_TEXT;
        border-right: none;
        content: "";
    }

    &:before {
        display: block;
        width: 100%;
        height: 100%;
        background: @WIN8_ACCENT_COLOR;
        content: "";
    }
}

.dx-switch {
    &.dx-state-focused{
        .dx-switch-off:before{
            background: @WIN8_SWITCH_OFF_FOCUS_BACKGROUND;
        }
        .dx-switch-on:before{
            background: @WIN8_SWITCH_ON_FOCUS_BACKGROUND;
        }
    }

    &.dx-state-hover{
        .dx-switch-off:before{
            background: @WIN8_SWITCH_OFF_HOVER_BACKGROUND;
        }
        .dx-switch-on:before{
            background: @WIN8_SWITCH_ON_HOVER_BACKGROUND;
        }
    }

    &.dx-state-active{
        .dx-switch-on:before{
            background: @WIN8_SWITCH_ON_ACTIVE_BACKGROUND;
        }
    }
}

.dx-switch-handle {
    position: relative;
    float: left;
    margin-left: -10px;
    width: 10px;
    height: @SWITCH_HEIGHT;
    background: @WIN8_BASE_TEXT;
}

.dx-rtl .dx-switch,
.dx-switch.dx-rtl {
    .dx-switch-on, .dx-switch-off {
        float: right;
    }

    .dx-switch-off {
        padding: 8px 0px 8px 15px;

        &:after {
            right: 0px;
            float: right;
        }
    }

    .dx-switch-on {
        &:after {
            left: 10px;
            float: right;
        }

        &:before {
            margin-right: 5px;
            margin-left: 0px;
        }
    }

    .dx-switch-handle {
        float: right;
        margin-right: -10px;
        margin-left: 0px;
    }
}
